<!DOCTYPE html>
<html>
<head>
    <title>LUI组件库</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="keywords" content="LUI，轻量级移动端UI组件库"/>
    <meta name="description" content="LUI，基于html,css,js原生能力驱动，轻量级移动端UI组件库。LUI不是框架，她只是为你的应用提供基础的UI组合以及一些常用方法，架构层面随你自行组织" />
    <link rel="icon" href="images/icon/lui.png">
    <link rel="stylesheet" type="text/css" href="css/lui.css" />

  <script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
    <div class="ui_page_wrap">
        <header class="ui_page_hd"><a href="javascript:goBack();" class="ui_back"></a>列表</header>
        <div class="ui_page_bd">
            <p class="ui_con_block">
                包含通栏列表，缩进列表，卡片列表，媒体列表。<br>PS：列表数据使用mock模拟。
            </p>
            <script type="text/html" id="tpl">
                <!-- /// [htmldemo] -->
                 <section class="mt10">
                    <h2 class="ui_list_hd">通栏列表</h2>
                    <ul class="ui_list ui_list_arrow">
                        {{# for(var i = 0,len = d.list.length;i< len;i++ ){ }}
                            <li><a href="{{d.list[i].url}}">{{d.list[i].title}}</a></li>
                        {{# }}}
                    </ul>
                </section>
                <section class="mt10">
                    <h2 class="ui_list_hd ui_list_hd_padded">缩进列表</h2>
                    <ul class="ui_list_padded">
                        {{# for(var i = 0,len = d.list.length;i< len;i++ ){ }}
                            <li>{{d.list[i].content}}</li>
                        {{# }}}
                    </ul>
                </section>
                <section class="mt10">
                    <h2 class="ui_list_hd">卡片列表</h2>
                    <ul class="ui_list ui_list_margin">
                        {{# for(var i = 0,len = d.list.length;i< len;i++ ){ }}
                            <li>
                                <a href="#">
                                    <h2 class="ui_list_item_title ellipsis">{{d.list[i].content}}</h2>
                                    <p class="pt5"><time class="ui_list_item_time">{{d.list[i].datetime}}</time></p>
                                </a>
                            </li>
                        {{# }}}
                    </ul>
                </section>
                <section class="mt10">
                    <h2 class="ui_list_hd">媒体列表</h2>
                    <ul class="ui_list">
                        {{# for(var i = 0,len = d.list.length;i< len;i++ ){ }}
                            <li class="ui_flex">
                                <figure><img src="{{d.list[i].image}}" class="ui_list_thumb"></figure>
                                <section class="ui_flex_item pl10">
                                    <h2 class="ui_list_item_title ellipsis_line2">{{d.list[i].content}}</h2>
                                    <div>
                                        <time class="ui_list_item_time">{{d.list[i].datetime}}</time>
                                    </div>
                                </section>
                            </li>
                        {{# }}}
                    </ul>
                </section>
                <!-- /// [htmldemo] -->
            </script>
            <div id="tpl_view"></div>
        </div>
    </div>

<script type="text/javascript" src="js/3rd-plugins/laytpl.js"></script> 
<!--mock模拟数据-->
<script src="js/3rd-plugins/mock.js"></script> 
<script type="text/javascript">
    var data = Mock.mock({
        'list|5':[{
            'name':"@name(true)",  
            'datetime':"@datetime('yyyy/MM/dd')", 
            'title' : "@province",
            'content':'@county(true)',
            'image':"@image('100X80','#267EF0','#fff','100X80')",
            'url':"@url"
        }]
    });
   var getTpl = document.getElementById('tpl').innerHTML;
        laytpl(getTpl).render(data, function(html){
        document.getElementById('tpl_view').innerHTML = html;
    });
</script>
</body>
</html>